<template>
	<div class="content-wrap">
	<div class="content clearflex"   v-for="item in lists">
	<div class="img-wrap fl">
		<img :src="item.img"/>
		</div>
		<div class="clearflex fl text">
		<div class="md fl">
			<p class="title-wrap"><span  class="title">{{item.nm}}</span>
				<span class="imax v3d" v-if="item.version=='v3d imax'"></span>
				<span class="imax v2d" v-if="item.version=='v2d imax'"></span>
				<span class="vv3d" v-if="item.version=='v3d'"></span>
			</p>
			<p class="people" v-if="!item.sc==0">观众评<span>{{item.sc}}</span></p>
			<p class="people" v-if="item.showst==4"><span>{{item.wish}}</span>人想看</p>
			<p class="people" v-if="item.showst==3">暂无评分</p>
			<p class="star">主演: {{item.star}}</p>
			<p class="releasetime">{{item.showInfo}}</p>
		</div>
		<div class="ri fr">
			<div class="ticket" v-if="item.globalReleased==true">
				购票
			</div>
			<div class="ticket ticket-back" v-if="item.globalReleased==false">
				预售
			</div>
		</div>
		</div>
	</div>
	</div>
</template>

<script>
	export default{
//	  mounted(){
//		this._initData();
//		console.log("mounted")
//				},
	  name: 'Demo',
	  props:["lists"],
	  methods:{
//				_initData(){
//					return new Promise((resolve,reject)=>{
//						var xhr=new XMLHttpRequest();
//						xhr.open("GET","https://www.easy-mock.com/mock/5bd2c2d372587d2d96a83671/maoyan/maoyan");
//						xhr.send();
//						xhr.addEventListener("readystatechange",function(){
//							if(xhr.readyState==4){
//								if(xhr.status==200){
//									resolve(xhr.response)
//								}
//							}
//						})
//					}).then((res)=>{
//						this.lists=JSON.parse(res).movieList;
//						console.log(res)
//						})
//					}
			}
	}
		
</script>

<style lang="scss">
@charset "utf-8";
@import "../../public/scss/reset"; 
$fs:64px;
html{
    font-size: $fs;
}
@function r($px){
    @return $px/$fs*1rem;   
	
}

.content-wrap{
width: 100%;
padding-bottom: r(96px);
.content{
width: r(576px);
height: r(228px);
margin: r(24px) 0 0 r(30px);
.img-wrap{
	width: r(128px);
	height: r(180px);
	overflow: hidden;
	img{
		width: 100%
	}
}/*图片容器*/
.text{
	width: r(400px);
	margin-left: r(24px);
	border-bottom: r(2px) solid #d8d8d8;
	padding-bottom: r(24px);
.md{
	width: r(294px);
.title-wrap{
	font-size: 0;
	width: r(294px);
	overflow: hidden;
	white-space: nowrap; 	
.title{
	display: inline-block;
/*	vertical-align: middle;*/
	max-width: r(244px);
	font-size: r(34px);
	font-weight: 700;
	color: #333;
	text-align: left;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	}
.imax{
		width: r(86px);
		height: r(28px);
		margin-left: r(10px);
		display: inline-block;
		vertical-align: r(4px);
		margin-top: r(10px);
	}
.v3d{
	background: url();
	background-size: contain;
	}

.v2d{
	background: url();
	background-size: contain;
	}
.vv3d{
	width: r(34px);
	height: r(28px);
	margin-left: r(10px);
	display: inline-block;
	vertical-align: r(4px);
	margin-top: r(10px);
	background: url();
	background-size: contain;
}	
}		
.people{
	font-size: r(26px);
	color: #666;
	text-align: left;
	margin: r(14px) 0;/*人数*/
	}
	span{
		font-size: r(30px);
		font-weight: 600;
		color: #faaf00;
		margin-left: r(4px);
	}

.releasetime,.star{
	font-size: r(26px);
	color: #666;
	text-align: left;
	margin-top: r(6px);
	line-height: r(30px);
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;/*主演|上映时间*/
	}
	}
.ri{
	width: r(94px);
	.ticket{
		width: r(94px);
		height: r(54px);
		margin-top: r(50px);
		background: #f03d37;
		border-radius: r(8px);
		text-align: center;
		line-height: r(54px);
		font-size: r(24px);
		color: #fff;
	}
	.ticket-back{
		background: #3c9fe6;
	}
}
	}
	}
}
</style>